<template>
  <!-- ======= Header ======= -->
  <!-- End Header -->
  <header id="header" class="d-flex align-items-center">
    <div class="container d-flex justify-content-between align-items-center">
      <div class="logo">
        <h1 class="text-light">
          <a href="index.html"><span>Moderna</span></a>
        </h1>
        <!-- Uncomment below if you prefer to use an image logo -->
        <!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
      </div>

      <nav id="navbar" class="navbar">
        <ul>
          <template v-for="(item, index) in menuData" :key="index">
            <template v-if="item.children && item.children.length > 0">
              <li class="dropdown">
                <a href="#">
                  <span>{{ item.title }}</span>
                  <i class="bi bi-chevron-down"> </i>
                </a>
                <ul>
                  <li v-for="(child, index2) in item.children" :key="index2">
                    <a :href="child.url">{{ child.title }}</a>
                  </li>
                </ul>
              </li>
            </template>
            <template v-else>
              <li>
                <a :href="item.url">{{ item.title }}</a>
              </li>
            </template>
          </template>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav>
      <!-- .navbar -->
    </div>
  </header>
</template>

<script>
import { HeaderData } from "@/assets/js/data.js";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "Header",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    console.log(proxy);
    const data = reactive({
      menuData: HeaderData.MenuData,
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      document
        .querySelector(".mobile-nav-toggle")
        .addEventListener("click", function () {
          document.querySelector("#navbar").classList.toggle("navbar-mobile");
          console.log(this.classList);
          this.classList.toggle("bi-list");
          this.classList.toggle("bi-x");
        });
    });
    //
    const methods = {};
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style scoped></style>
